import React, { useEffect, useState } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import { imgUrlPrefix } from "@/common/config";
import ListStatusInfo from "@/components/ListStatusInfo";

import * as api from "./api";
import "./index.scss";

const Index: React.FC<{}> = () => {
  const [data, setData] = useState<any[]>([]);
  const [current, setCurrent] = useState(1);
  const [total, setTotal] = useState<number | null>(null);
  const [searchInfo, setSearchInfo] = useState<any>({});
  const [loading, setLoading] = useState(false);

  const getData = async () => {
    try {
      setLoading(true);
      const { result, status } = await api.customer_contract_search({});
      if (status === "ok") {
        setData(result.data_list);
      }
    } catch (err) {
      console.log("err--------->>>", err);
    } finally {
      setLoading(false);
    }
  };

  useDidShow(() => {
    getData();
  });

  return (
    <View className="contract-list-page">
      <View className="list-wrapper">
        {data.map((item) => (
          <View
            className="item"
            key={item.id}
            onClick={() => {
              // const pageUrl=item.status==='wait_signed'?'':''
              if (item.status === "wait_signed") {
                const params = {
                  invoice_info: {
                    name: item.name,
                    phone: item.phone,
                    identification: item.identification,
                  },
                  contract_info: {
                    img_url: item.img_url,
                    id: item.id,
                  },
                };
                Taro.navigateTo({
                  url: `/pages/signContract/index?params=${JSON.stringify(
                    params
                  )}`,
                });
              } else {
                Taro.navigateTo({
                  url: `/pages/contratPreview/index?params=${JSON.stringify({
                    img_url: item.img_url,
                  })}`,
                });
              }
            }}
          >
            <View className="img-wrapper">
              <Image mode="widthFix" src={imgUrlPrefix + item.img_url[0]} />
              <View
                className={
                  item.status === "signed" ? "status" : "status status__green"
                }
              >
                {item.status_name}
              </View>
            </View>
            <View className="title">{item.contract_name}</View>
            <View className="date">{item.create_time}</View>
          </View>
        ))}
      </View>

      <ListStatusInfo
        total={data.length}
        dataLength={data.length}
        loading={loading}
      />
    </View>
  );
};

export default Index;
